<template>
  <div class="gl_contentBox">
    <el-tabs v-model="activeTab" class="gl_tabs" @tab-click="tabClick">
      <el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item.label" :name="item.name">
        <component :is="item.component" v-if="activeTab === item.name" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import roleList from './roleList.vue';
import staffList from './editStaff/staffList.vue';
import studentLsit from './editStudent/studentList.vue';
export default {
  data () {
    return {
      activeTab: this.$route.query.name || 'roleList',
      storeId: '',
      tabList: [
        {
          label: '角色管理',
          name: 'roleList',
          productStatus: 'roleList',
          component: roleList
        },
        {
          label: '员工管理',
          name: 'staffList',
          productStatus: 'staffList',
          component: staffList
        },
        {
          label: '学员管理',
          name: 'studentLsit',
          productStatus: 'studentLsit',
          component: studentLsit
        }
      ]
    };
  },
  methods: {
    tabClick() {
      this.$router.push({ query: { 'name': this.activeTab }});
    }
  }
};
</script>

<style>

</style>
